<link rel="stylesheet" href="${request.contextPath}/static/oms/default/plugins/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<div class="row">
	<div class="col-md-12">
		<form id="sysDictionaryDataAddForm" class="form-horizontal"  action="${request.contextPath}/system/config/dictionary/data/update" method="post" onsubmit="return false">
			<div class="box-body" >
				<input type="hidden" class="form-control" name="id"  id="sysDictionaryDataId"  value="${sysDictionaryData.id}" >
				<div class="form-group">
					<label id="sysDictionaryIdLabel" for="sysDictionaryId" class="col-sm-3  control-label">字典分类</label>
					<div class="col-sm-8">
						<select class="form-control" id="sysDictionaryId" name="dictionaryId"   style="width: 100%;"  placeholder="选择字典分类...">
						</select>
					</div>
				</div>
				<div class="form-group">
					<label id="sysDictionaryDataParentIdLabel" for="sysDictionaryDataParentId" class="col-sm-3  control-label">上级字典数据</label>
					<div class="col-sm-8">
						<div class="input-group">
							<input type="hidden" class="form-control" id="sysDictionaryDataParentId" name="parentId"  value="${sysDictionaryData.parentId}" >
							<input type="text" class="form-control"  id="sysDictionaryDataParentName" value="" placeholder="选择上级字典数据...">
							<span class="input-group-addon"><i class="glyphicon glyphicon-remove" style="color: #FF0000;" id="sysDictionaryDataParentIdClear"></i></span>
							<div id="sysDictionaryDataContent" class="sysDictionaryDataContent" style="position: absolute; left: 5px; top: 25px; display: none;z-index: 999999;">
								<ul id="sysDictionaryDataParentTree" class="ztree" style="margin-top: 10px;
																border: 1px solid #d6e0df;
																background: #fbfbfb;
																width: 220px;
																height: 360px;
																overflow-y: scroll;
																overflow-x: auto; -moz-user-select: none;">
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label id="sysDictionaryNameLabel" for="sysDictionaryName" class="col-sm-3 control-label">名称</label>
					<div class="col-sm-8">
						<input type="text" class="form-control" name="name" id="sysDictionaryName"  value="${sysDictionaryData.name}"  placeholder="输入名称...">
					</div>
				</div>
				<div class="form-group">
					<label id="sysDictionaryCodeLabel" for="sysDictionaryCode" class="col-sm-3 control-label" >编码</label>
					<div class="col-sm-8">
						<input type="text" class="form-control" name="code" id="sysDictionaryCode" value="${sysDictionaryData.code}"  placeholder="输入编码...">
					</div>
				</div>
				<div class="form-group">
					<label id="sysDictionaryTypeLabel" for="sysDictionaryType" class="col-sm-3  control-label">类型</label>
					<div class="col-sm-8">
						<select class="form-control" id="sysDictionaryType" name="type"   value="${sysDictionaryData.type}" style="width: 100%;"  placeholder="选择字典类型...">
						</select>
					</div>
				</div>
				<div class="form-group">
					<label id="sysDictionaryValueLabel" for="sysDictionaryValue" class="col-sm-3 control-label" >字典值</label>
					<div class="col-sm-8">
						<input type="text" class="form-control" name="value" id="sysDictionaryValue" value="${sysDictionaryData.value}"  placeholder="输入字典值...">
					</div>
				</div>
				<div class="form-group">
					<label id="sysDictionarySeqLabel" for="sysDictionarySeq" class="col-sm-3  control-label">排序</label>
					<div class="col-sm-8">
						<input class="form-control" name="seq" id="sysDictionarySeq" value="${sysDictionaryData.seq}" type="number" placeholder="输入排序号...">
					</div>
				</div>
				<div class="form-group">
					<label id="sysDictionaryStatusLabel" for="sysDictionaryStatus" class="col-sm-3  control-label">状态</label>
					<div class="col-sm-8">
						<select class="form-control" id="sysDictionaryStatus"  name="status"  value="${sysDictionaryData.status}" style="width: 100%;" placeholder="选择状态...">
						</select>
					</div>
				</div>
				<div class="form-group">
					<label id="sysDictionaryRemarkLabel" class="col-sm-3 control-label">备注</label>
					<div class="col-sm-8">
						<input type="text" class="form-control" name="remark" id="sysDictionaryRemark"  value="${sysDictionaryData.remark}" placeholder="输入备注...">
					</div>
				</div>
				<div class="error-message text-center" id="sysDictionaryAddFormErrorMsgContainer">
					<span class="error-icon"></span>
					<span id="sysDictionaryAddFormErrorMsg" class="error-msg" ></span>
				</div>
			</div>
			<div class="box-footer">
				<div class="text-center">
					<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"><i class="fa fa-close"></i> 取消</button>
				</div>
			</div>
		</form>
	</div>
</div>
<script type="text/javascript" src="${request.contextPath}/static/oms/default/plugins/zTree/jquery.ztree.all.js"></script>
<script type="text/javascript">
$(function() {
    $("#sysDictionaryDataParentName").on('click',function () {
        $('#sysDictionaryDataContent').css("display")==='none'?$('#sysDictionaryDataContent').show():$('#sysDictionaryDataContent').hide();
    });
    $("#sysDictionaryDataContent").mouseleave(function () {
        $('#sysDictionaryDataContent').hide();
    });

    $("#sysDictionaryDataParentIdClear").on('click',function () {
        $("#sysDictionaryDataParentId").val("");
        $("#sysDictionaryDataParentName").val("");
    });
    $.ajax({
        type:"get",
        url:'/system/config/dictionary/treeGrid',
        dataType:'json'
    }).done(function(result){
        var o = [];
        var a = result;
        $.each(a, function() {
            if(this.id != undefined && this.id !=''){
                o.push({'id':this.id,'text':this.name});
            }
        });
        var select2 = $("#sysDictionaryId").select2({
            data:o,
            placeholder: "字典...",
            allowClear: false,
            language: "zh-CN",
            theme: "bootstrap"
        });

        $("#sysDictionaryId").on('change',function () {
            var url = "";
            if($(this).val()){
                url="/system/config/dictionary/data/treetable?dictionaryId="+$(this).val();
			}
            var setting = {
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "parentId",
                        rootPId: null
                    }
                },
                async: {
                    enable: true,
                    url:url
                },
                callback:{
                    onAsyncSuccess:function (event, treeId) {
                        var node = $.fn.zTree.getZTreeObj(treeId).getNodeByParam("id", $("#sysDictionaryDataParentId").val());
                        if(node){
                            $("#sysDictionaryDataParentName").val(node.name);
                        }
                    },
                    onClick :function (event, treeId, treeNode) {
                        $("#sysDictionaryDataParentId").val(treeNode.id);
                        $("#sysDictionaryDataParentName").val(treeNode.name);
                        $('#sysDictionaryDataContent').hide();
                    }
                }
            };
            $.fn.zTree.init($('#sysDictionaryDataParentTree'), setting);
        });

        select2.val('${sysDictionaryData.dictionaryId}').trigger("change");

    });

    $("#sysDictionaryType").select2({
        data: DictionaryTypeStore,
	 	placeholder: "选择字典类型...",
		allowClear: true,
        language: "zh-CN",
        theme: "bootstrap"
    });
    $("#sysDictionaryStatus").select2({
        data: StatusStore,
        placeholder: "选择状态...",
        allowClear: true,
        language: "zh-CN",
        theme: "bootstrap"
    });
});
</script>